<template>
	<view class="pages" style="background-color: #fff;">
		<!-- 		<view class="title _paddingTop">
			投诉查询结果
		</view> -->
		<view class="_marginTop" style="border: 1px solid #eee; border-radius: 15rpx;">
			<view class="commonBox" id="chezhutousu">
				<view class="tabBox _flex _paddingTop " style="padding-bottom: 20rpx;margin-left: 11px;border-bottom: 1px solid#eee; font-size:36rpx;text-overflow: ellipsis;
		  overflow: hidden;
		  white-space: nowrap;">
					<view class="" id="cartitle">
						<text>{{pp}}{{cx}}</text>
						<text>{{cxing}}</text>
					</view>

				</view>

				<view class="" style="background: #F9F9F9;padding: 20rpx; margin-top: 20rpx;">
					<view class="">
						累计投诉
						<text style="color:#C70F0F ;">{{ obj.totleCount }}</text>
						条、其中车辆故障投诉<text style="color:#C70F0F ;">{{ obj.count8 }}</text>条、服务问题投诉<text
							style="color:#C70F0F ;">{{obj.countFu}}</text>条、召回问题投诉<text
							style="color:#C70F0F ;">{{obj.countZh}}</text>条
					</view>
				</view>
				<!-- 故障 -->
				<view class="" style="border: 1px solid #eee;border-top: 0px;">
					<view class="_flex _justify_between"
						style=" font-size: 35rpx;background: #F9F9F9;padding: 20rpx; margin-top: 20rpx;  margin-bottom: 20rpx;">
						<view class="">
							车辆故障
						</view>
						<view class="" style="color:#002B56 ;">
							共{{ obj.count8 }}个故障
						</view>
					</view>
					<view class="" style="padding: 11px;" v-if="obj.count8>0">
						<view class="_flex breakList" v-for="(item,index) in mapList8" :key="index">
							<text class="breakDownName">{{item.name}}</text>
							<view class="" style="width: 50%;">
								<u-line-progress active-color="#002B56" :percent="item.bfb"></u-line-progress>
							</view>
						</view>
					</view>
				</view>

				<!-- 服务问题 -->
				<view class="" style="border: 1px solid #eee;border-top: 0px;">
					<view class="_flex _justify_between"
						style=" font-size: 35rpx;background: #F9F9F9;padding: 20rpx; margin-top: 20rpx;  margin-bottom: 20rpx;">
						<view class="">
							服务问题
						</view>
						<view class="" style="color:#002B56 ;">
							共{{ obj.countFu }}条
						</view>
					</view>
					<view class="" style="padding: 11px;" v-if="obj.countFu>0">
						<view class="_flex breakList" v-for="(item,index) in mapListJsonFu" :key="index">
							<text class="breakDownName">{{item.name}}</text>
							<view class="" style="width: 50%;">
								<u-line-progress active-color="#002B56" :percent="item.bfb"></u-line-progress>
							</view>
						</view>
					</view>
				</view>
				<!-- 召回问题 -->
				<view class="" style="border: 1px solid #eee;border-top: 0px;">
					<view class="_flex _justify_between"
						style=" font-size: 35rpx;background: #F9F9F9;padding: 20rpx; margin-top: 20rpx;  margin-bottom: 20rpx;">
						<view class="">
							召回问题
						</view>
						<view class="" style="color:#002B56 ;">
							共{{ obj.countZh }}条
						</view>
					</view>
					<view class="" style="padding: 11px;" v-if="obj.countZh>0">
						<view class="_flex breakList" v-for="(item,index) in mapListJsonZh" :key="index">
							<text class="breakDownName">{{item.name}}</text>
							<view class="" style="width: 50%;">
								<u-line-progress active-color="#002B56" :percent="item.bfb"></u-line-progress>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="_marginTop" style="border: 1px solid #eee; border-radius: 15rpx;">
			<view class="" style="border: 1px solid #eee;border-top: 0px;">
				<view class="_flex _justify_between" style=" font-size: 35rpx;background: #F9F9F9;padding:0 20rpx;">
					<view class="">
						典型投诉
					</view>
				</view>
				<view class="breakListbox" style="padding: 11px;">
					<view class="_flex _marginTop dxts"
						style="border: 1px solid #002B56;color: #002B56;font-size: 24rpx;"
						v-for="(item,index) in complaintList" :key="index">
						<text style="background: #002B56;color: #fff;padding: 10rpx 20rpx;">{{item.name}}</text>
						<text style="padding: 10rpx 20rpx;display: inline-block;">{{item.title}} {{item.count}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="_marginTop" style="border: 1px solid #eee; border-radius: 15rpx;">
			<view class="" style="border: 1px solid #eee;border-top: 0px;">
				<view class="_flex _justify_between" style=" font-size: 35rpx;background: #F9F9F9;padding:0 20rpx;">
					<view class="">
						问题简述
					</view>
				</view>

				<view  style="padding-left: 36rpx; padding-top: 20rpx; ">
					<u-time-line v-for="(item,index) in questionDesc" :key="index">
						<u-time-line-item nodeTop="2">
							<template v-slot:node>
								<view class="u-node" style="background: #002a58;">
									<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
								</view>
							</template>
							<template v-slot:content>
								<view  style="width:98%;">
									<view class="_flex _justify_between questionDesc"  style="width: 100%;">
										<view class="u-order-title" style="margin-right:0 20rpx;">
											{{item.name}}
										</view>
									</view>
									<view class="" style="color: #999;">
										{{item.tssj}}
									</view>
									<view class="u-order-desc" style="width: 100%;">说明：{{item.wtms}}</view>
								</view>
							</template>
						</u-time-line-item>
					</u-time-line>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				year: "",
				cxing: "", //车型
				pp: "", //品牌
				cx: "", //车系
				// countFu:'',//服务投诉
				form: {},
				activeComplain: 0, //车主投诉tab栏
				tabComplainList: [{
					name: "2020",
				}, ],
				mapList8: [],
				mapListJsonFu: [],
				mapListJsonZh: [],
				// 典型投诉
				complaintList: [],
				questionDesc: [],
				obj: null,
				// versionYear:"",
				// totleCount
			};
		},
		onLoad(option) {
			if (option.item) {
				const itemJson = JSON.parse(decodeURIComponent(option.item));
				console.log("带过来的数据");
				// console.log(itemJson.cxing)
				console.log(itemJson);
				var that = this
				that.obj = itemJson
				that.obj.totleCount = itemJson.totleCount
				// this.tabComplainList[1].name = itemJson.versionYear
				that.mapList8 = itemJson.mapList8
				console.log(itemJson.mapList8)
				that.cxing = itemJson.cxing
				that.pp = itemJson.pp
				that.cx = itemJson.cx
				that.mapListJsonFu = itemJson.mapListJsonFu
				that.mapListJsonZh = itemJson.mapListJsonZh
				// that.countFu = itemJson.countFu
				that.complaintList = itemJson.mapListTypical
				
				that.questionDesc = (itemJson.tssjWtmsListJson).reverse()
				// that.versionYear = itemJson.versionYear ? itemJson.versionYear : ""
				// that.totleCount = itemJson.totleCount
			}
			console.log(option)
			if (option.year) {
				var that = this
				that.year = option.year
			}
		},
		methods: {
			// 车主投诉tab栏
			tabComplainChange(idx) {
				this.activeComplain = idx
			},
			myComplain() {
				uni.navigateTo({
					url: "./myComplain"
				})
			}
		},

	};
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped>



	.breakListbox {
		display: flex;
		flex-wrap: wrap;
	}

	.tabBox_flex_paddingTop {}

	.breakList {
		padding: 5rpx 0;
	}

	.dxts {
		margin-right: 20rpx;
	}

	.title {
		color: #002B56;
		font-size: 46rpx;
		font-weight: bold;
	}

	.carBaseName {
		color: #888;
		display: inline-block;
		width: 200rpx;
	}

	.batteryBox {
		width: 50%;
		line-height: 52rpx;
	}

	.dataBgColDark {
		background-color: #002A58;
		height: 50rpx;
		line-height: 50rpx;
		color: #fff;
		text-align: center;
	}

	.dataBgCol {
		background-color: #E5E5E5;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
	}

	.commonBox {
		background-color: #fff;
		padding: 0 20rpx;
		border-radius: 20rpx;

	}

	.commonTitle {
		color: #002A55;
		font-size: 34rpx;
		font-weight: bold;
		margin-top: 20rpx;
		padding-top: 20rpx;
	}

	.tabBox {
		color: #002B56;
		align-items: flex-end;
		margin-top: 20rpx;
	}

	.tabName {
		font-size: 30rpx;
	}

	.tabBox .active {
		font-size: 36rpx;
		font-weight: bold;
		color: #002B56;
	}

	.breakDownName {
		display: inline-block;
		margin-right: 11px;
		width: 260rpx;
	}

	.fixed_posit {
		opacity: 0.7;
		position: fixed;
		background: #577771;
		bottom: 20%;
		color: #fff;
		padding: 20rpx 30rpx;
		right: 10px;
		border-radius: 50%;
	}

	/* 时间轴 */
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
		height: auto;    
		padding-bottom: 10rpx;
		
	}
/* 	
	.tssj{
		color:#999;
		font-weight: normal;
		font-size: 24rpx;
	} */

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;

	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
/* 
	.questionDesc {
		padding: 24rpx 34rpx;
		box-sizing: border-box;
	}
 */
	.u-time-axis {
		display: none;
	}

	.u-time-axis::before {
		display: none;
	}

	#cartitle {
		display: flex;
		flex-direction: column;

	}
	
	.questionDesc {
		width: 100%;
		height: auto;
	}
</style>
